<template>
	<!--供应商and客户销售and采购汇总-->
	<view class="clientWrapper">
		<view class="clientSearchItem">
			<!-- <input class="search clientSearch" placeholder="请输入供应商名称/编号" v-model="inputStr"></input>
		<button class="button searchBt" @tap="search()">搜索</button> -->
			<view class='clientSearch'>当前条件:{{curstomName}}</view>
			<button class="searchBt" @tap="filter()">搜索条件</button>
			<button class="searchBt" @tap="openModel(0)">新增档案</button>
		</view>
		<view class="container" v-show="isTable">
			<!-- 表格外层 -->
			<view class="tdHeader" :style="{width:allWidth+'px'}">
				<view class="tdTh" v-for="(item,index) in clientTitleList" :key="item.name" :style="{width:clientSettingWidthList[index] + 'px'}">
					{{item.name}}
				</view>
			</view>
			<view class="tdContain" :style="{width:allWidth +'px',height:tdHeight+'px'}">
				<view class="tdItems" v-for="(item,index) in clientList" :key="index" @tap="lookDetail(index)" @longtap="delop(item.OperatorID)">
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[0] + 'px'}">{{index+1}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[1] + 'px'}">{{item.ClientCode}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[2] + 'px'}">{{item.ClientName}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[3] + 'px'}">{{item.Contacts}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[4] + 'px'}">{{item.Phone}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[5] + 'px'}">{{item.Address}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[6] + 'px'}">{{item.IsClient==0?"客户":item.IsClient==1?"供应商":"全部客户"}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[7] + 'px'}">{{PriceType[item.PriceType]}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[8] + 'px'}">{{item.EName}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[9] + 'px'}">{{item.IsStop?'是':'否'}}</view>

				</view>
			</view>
		</view>
		<view :style="{height:tdListHeight+'px'}" class="listContainer" v-show="!isTable">
			<view class="tdListItem" v-for="(item,index) in clientList" :key="index" :style="{ display:(nowRote === index) ? 'table':'block'}">
				<view @tap="lookDetail(index)" class="left-contain" @longtap="delop(item.OperatorID)">
					<view class="ClientTitle">{{item.ClientName}}</view>
					<view>编号:{{item.ClientCode}}</view>
					<view class="clientItemShow">
						<text>电话:{{item.Phone}}</text>
						<text>联系人:{{item.Contacts}}</text>
					</view>
					<!-- <view>电话:{{item.Phone}}</view> -->
					<view>地址:{{item.Address}}</view>
					<view>所属业务:{{item.EName}}</view>
					<view>适用价格:{{PriceType[item.PriceType]}}</view>
					<view>所属类型:{{item.IsClient==0?'客户':item.IsClient==1?"供应商":"全部客户"}}</view>
					<view>停用:{{item.IsStop?'是':'否'}}</view>
				</view>
				<view class="sortIndex">{{index+1}}</view>
				<!-- <button class="lookMoreInfo" :style="{ transform :(nowRote == index) ? 'rotate(180deg)':'rotate( 0deg)'}" -->
				<button class="lookMoreInfo" @tap.stop="lookMore(index)">{{nowRote == index?"收起":"展开"}}</button>
			</view>
		</view>
		<view class="options">
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-dialogWrap">
						<view class="cu-bar bg-white justify-end">
							<view class="content">设置表格列宽度</view>
							<view class="action" @tap="hideModal">
								<text class="cuIcon-close text-red"></text>
							</view>
						</view>
						<view class="padding-xl">
							<view class="padding-xl-item" v-for="(item,index) in tdHeaderList" :key="item.name">
								<text>{{item.name}}:</text><input v-model="clientSettingTempList[index]" type="number" />
							</view>
						</view>
						<view class="cu-bar bg-white justify-end">
							<view class="action">
								<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
								<button class="cu-btn bg-green margin-left" @tap="sureSetting">确定</button>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import * as Api from '@/syApis/syDa/syDa.js';
	import * as Apis from '@/syApis/syAddOrder/syaddApis.js';
	export default {
		created() {
		
		},
		watch: {
			//统计数量
			orderList(oldval, newval) {
				var inPurSaleQty = 0;
				var inPurSaleAmount = 0
				var outPurQty = 0;
				var outPurAmount = 0;
				var inGetQty = 0;
				var ouGetQty = 0;
				var cyQty = 0;
				var cyAmount = 0;
				var _this = this;
				this.orderList.forEach(item => {
					inPurSaleQty += item.real_qty;
					inPurSaleAmount += item.real_Amount;
					outPurQty += item.return_qty;
					outPurAmount += item.return_Amount;
					inGetQty += item.real_qty2;
					ouGetQty += item.return_qty2;
					cyQty += item.Qty;
					cyAmount += item.Amount;
				});
				this.inPurSaleQty = inPurSaleQty;
				this.inPurSaleAmount = inPurSaleAmount;
				this.outPurQty = outPurQty;
				this.outPurAmount = outPurAmount;
				this.inGetQty = inGetQty;
				this.ouGetQty = ouGetQty;
				this.cyQty = cyQty;
				this.cyAmount = cyAmount;
			}
		},
		onLoad(options){
			// 获取表格框的宽度
			let tbWidList = uni.getStorageSync("InfoComUnitWidthList", "");
			// console.log(tbWidList);
			if (tbWidList != "") {
				this.clientSettingWidthList = JSON.parse(tbWidList);
				this.clientSettingTempList = JSON.parse(tbWidList);
			}
		},
		onShow(){
			this.$eventHub.$off('fire');
			var $this = this;
			let screenHeight = uni.getSystemInfoSync().windowHeight;
			//数据展示部分的高度
			this.tdListHeight = screenHeight - 50;
			//表格除表头部分数据的展示
			this.tdHeight = screenHeight - 90;
			if(this.isFirst){
				this.getCgOrder();
			}
		},
		computed: {
			//表头总宽度
			allWidth() {
				let allClietnWidth = 0;
				this.clientSettingWidthList.forEach(item => {
					allClietnWidth += parseFloat(item);
				})
				return allClietnWidth;
			}
		},
		methods: {
			delop(ID){
				let data ={
					ClientID:ID
				}
				Api.Delete_ClientMessage(data,function(res){
					if(res.state){
						if(res.data.ErrorMsg!=""){
							Api.showTip(res.data.ErrorMsg);
							return;
						}
						
						Api.showTip("删除成功");
					}
				});
			},
			//新增修改监听
			AddListens() {
				var _this = this;
				this.$eventHub.$on('fires', function(data) {
					_this.getCgOrder();
					console.log("调用了");
					_this.$eventHub.$off('fires');
				});
			},
			//过滤监听
			AddListen() {
				var _this = this;
				this.$eventHub.$on('fire', function(data) {
					// _this.ClientCode = data.ClientCode;
					_this.ClientName = data.ClientName == "" ? "全部客户" : data.ClientName;
					// _this.Phone = data.Phone;
					// _this.curstomName = data.ClientName == "" ? "全部客户" : data.ClientName;
					_this.getCgOrder(data);
					_this.$eventHub.$off('fire');
				});
			},
			openModel() {
				this.AddListens();
				this.isFirst = true;
				uni.navigateTo({
					url: './info-comeUnitAdd?type=1'
				})
			},
			lookDetail: function(index) {
				this.AddListens();
				this.isFirst = true;
				uni.navigateTo({
					url: "./info-comeUnitAdd?type=0&NowSelectUnit=" + JSON.stringify(this.clientList[index])
				})
			},
			//修改宽度
			changeWidth() {
				this.showChange = true;
			},
			// hideChaneg() {
			// 	this.showChange = false;
			// },
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//跳转到筛选条件页
			filter() {
				this.AddListen();
				this.isFirst = false;
				uni.navigateTo({
					url: './info-comeUnitF'
				})
			},
			//修改展示方式
			changeShow() {
				this.isTable = !this.isTable;
			},
			hideChaneg() {
				this.modalName = "";
				let tempList = [];
				this.clientSettingWidthList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingTempList = tempList;
				// uni.setStorageSync("tbWidList",JSON.stringify(tempList));
				// this.tdWidthList = this.tdWidth;
			},
			sureSetting() {
				let tempList = [];
				this.clientSettingTempList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingWidthList = tempList;
				uni.setStorageSync("InfoComUnitWidthList",JSON.stringify(tempList));
				this.modalName = "";
			},
			//获取业务员列表
// 			GetOperatorMessage() {
// 				let data = {
// 					Filter: ""
// 				}
// 				this.optionsPicker = [];
// 				var that = this;
// 				Apis.GetOperatorMessage(data, function(res) {
// 					if (res.state) {
// 						if (res.data.ErrorMsg == "获取登录信息失败") {
// 							Api.showTip("登录超时");
// 						} else if (res.data.ErrorMsg != "") {
// 							Api.showTip(res.data.ErrorMsg);
// 						} else {
// 							let responseData = res.data.ResultMsg;
// 							that.optionsList = responseData;
// 							that.getCgOrder();
// 						}
// 					} else {
// 
// 					}
// 				});
// 			},
			//获取汇总数据
			getCgOrder: function(filter) {
				let data = {};
				if (filter == undefined) {
					data = {
						SelectAll: 1
					}
				} else {
					data = filter;
				}
				var _this = this;
				Api.Get_ClientMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
                            if(res.data.ResultMsg.length==0){
								Api.showTip("查无数据");
							}
							_this.clientList = _this.setGetTwoFloat(res.data.ResultMsg);
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				});

			},
			//将数额保留两位小数
			setGetTwoFloat(arr) {
				var that = this;
				arr.forEach((item, index) => {
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].real_Amount = Api.setTwoFloat(item.real_Amount);
					arr[index].return_qty = Api.setTwoFloat(item.return_qty);
					arr[index].real_qty2 = Api.setTwoFloat(item.real_qty2);
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].return_qty2 = Api.setTwoFloat(item.return_qty2);
					arr[index].Qty = Api.setTwoFloat(item.Qty);
					arr[index].Amount = Api.setTwoFloat(item.Amount);
					that.optionsList.forEach((items, indexs) => {
						if (items.OperatorID == item.EmpID) {
							item.EmpName = items.OperatorName;
						}
					})
				});
				return arr;
			},
			lookMore: function(index) {
				this.nowRote = this.nowRote == index ? "-1" : index;
			},
            showModal(){
				this.modalName = "Modal";
			},
			hideModal(){
				this.modalName = "";
			},
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeShow();
				} else if (index == 1) {
					this.showModal();
				}
			},
		},

		data() {
			return {
				//表头宽度列表
				clientSettingWidthList: [50, 100, 100, 100, 100, 100, 100, 100, 100, 100],
				//设置表头宽度临时列表
				clientSettingTempList: [50, 100, 100, 100, 100, 100, 100, 100, 100, 100],
				//表格内容显示部分高度
				tdHeight: 0,
				//数据展示部分高度
				tdListHeight: 0,
				//供应商or客户列表
				clientList: [],
				showChange: false,
				orderList: [],
				containerHeight: 100,
				wrapperHeight: 600,
				orderListHeight: 100,
				orderLiHeight: 100,
				isList: true,
				startTime: "",
				endTime: "",
				curstomName: "全部单位",
				//订单页标题
				OrderTitle: "往来单位",
				//是否供应商销售汇总
				isSupperPurb: false,
				nowRote: -1,
				//进货/销售数量总计
				inPurSaleQty: 0,
				//进货/销售金额总计
				inPurSaleAmount: 0,
				//退货数量总计
				outPurQty: 0,
				//退货金额总计
				outPurAmount: 0,
				//进货数总计
				inGetQty: 0,
				//退货数总计
				ouGetQty: 0,
				//差异数
				cyQty: 0,
				//差异金额
				cyAmount: 0,
				//是否展示表格
				isTable: false,
				//td宽度列表
				tdWidth: [125, 125, 125, 125, 125, 125, 125, 125, 125, 125],
				//弹框展示
				modalName: null,
				// curstomName:"全部员工",
				// nowRote:-1,
				//tb表头
				tdHeaderList: [{
						name: "序号"
					},
					{
						name: "编号"
					}, {
						name: "名称"
					}, {
						name: "联系人"
					}, {
						name: "电话"
					}, {
						name: "地址"
					}, {
						name: "客户"
					}, {
						name: "适用价格"
					}, {
						name: "所属业务"
					}, {
						name: "停用"
					}
				],
				clientTitleList: [{
						name: "序号"
					},
					{
						name: "编号"
					}, {
						name: "名称"
					}, {
						name: "联系人"
					}, {
						name: "电话"
					}, {
						name: "地址"
					}, {
						name: "客户"
					}, {
						name: "适用价格"
					}, {
						name: "所属业务"
					}, {
						name: "停用"
					}
				],
				PriceType: [
					"最近价格", "进价", "零售价", "单价1", "单价2", "配送价", "会员价", "批发价"
				],
				optionsList: [],
				ClientCode: "",
				ClientName: "",
				Phone: "",
				isFirst:true
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
		font-family: "宋体";
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.clientWrapper {
		width: 100%;
		height: 100%;
	}

	.clientSearchItem {
		width: 100%;
		height: 100upx;
		display: flex;
		box-sizing: border-box;
		padding: 15upx 10upx 0px 10upx;
	}

	.clientSearchItem .clientSearch {
		flex: 1;
		height: 70upx;
		line-height: 70upx;
		padding-left: 16upx;
		font-size: 28upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.clientSearchItem .searchBt {
		width: 140upx;
		height: 70upx;
		line-height: 70upx;
		font-size: 24upx;
		padding: 0px;
		margin-right: 4upx;
		/* border-bottom-left-radius: 0px; */
		background-color: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.options {
		width: 100%;
		height: 0px;
		display: flex;
		border-top: 1px solid #ccc;
	}

	.options button {
		padding-left: 24upx;
		padding-right: 24upx;
		height: 60upx;
		font-size: 24upx;
		line-height: 60upx;
		margin-top: 10upx;
		background: rgba(124, 170, 216, 1);

		color: #FFF;
		box-sizing: border-box;

	}

	.container {
		width: 100%;
		overflow: auto;
	}

	.container .tdHeader {
		height: 80upx;
		line-height: 80upx;
		background: rgba(124, 170, 216, 1);
		box-sizing: border-box;
		display: flex;
	}

	.container .tdHeader .tdTh {
		box-sizing: border-box;
		min-height: 80upx;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1rpx solid #ccc;
		padding-left: 8upx;
		padding-right: 8upx;
		overflow: auto;
		color: #FFF;
		text-align: center;
	}

	.tdContain {
		overflow: auto;
	}

	.tdContain .tdItems {
		text-align: center;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tdContain .tdItems.tdItem {
		display: block;
		box-sizing: border-box;
		height: 80upx;
		line-height: 80upx;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1rpx solid #ccc;
		padding-left: 8upx;
		padding-right: 8upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.listContainer {
		width: 100%;
		overflow-x: hidden;
	}

	.listContainer .tdListItem {
		width: 95%;
		margin: auto;
		margin-bottom: 10upx;
		border-radius: 10upx;
		border: 1px solid #ebebeb;
		padding-left: 70upx;
		padding-right: 16upx;
		box-sizing: border-box;
		position: relative;
		height: 144upx;
		overflow: hidden;
	}

	.listContainer .tdListItem.more {
		display: table;
	}

	.listContainer .tdListItem view {
		padding-top: 4upx;
		padding-bottom: 4upx;
		line-height: 40upx;
	}

	.listContainer .tdListItem .left-contain {
		width: 100%;
		overflow: hidden;
	}

	.listContainer .tdListItem .clientItemShow {
		display: flex;
	}

	.listContainer .tdListItem .ClientTitle {
		font-size: 32upx;
		font-weight: bold;
	}

	.listContainer .tdListItem .clientItemShow text {
		flex: 1;
	}

	.listContainer .tdListItem .sortIndex {
		padding: 0upx 10upx;
		position: absolute;
		left: 10upx;
		top: 10upx;
		border-radius: 4upx;
		background: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.listContainer .tdListItem .lookMore {
		width: 40upx;
		height: 40upx;
		background: url(../../static/pullMore.png) no-repeat;
		position: absolute;
		right: 10upx;
		bottom: 10upx;
		border-radius: 4upx;
		color: #FFF;
		padding: 0px 10upx;
	}

	.cu-dialog {
		min-height: 800upx !important;
		max-height: 800upx !important;
		/* display: flex;
		flex-direction: column; */
	}

	.cu-dialog .cu-dialogWrap {
		min-height: 800upx !important;
		max-height: 800upx !important;
		display: flex;
		flex-direction: column;
	}

	.padding-xl {
		overflow: auto;
		flex: 1;
	}

	.padding-xl-item {
		display: flex;
	}

	.padding-xl-item text {
		min-width: 160upx;
		height: 80upx;
		line-height: 80upx;
		text-align: right;
		padding-right: 20upx;
		box-sizing: border-box;
		display: table;
	}

	.padding-xl-item input {
		flex: 1;
		border: 1px solid #CCC;
		height: 60upx;
		line-height: 60upx;
		margin-top: 10upx;
	}

	.lookMoreInfo {
		/* width: $iconWidth; */
		width: 80upx;
		height: 40upx;
		line-height: 35upx;
		padding:4upx 0upx;
		color: #FFF;
		/* padding-bottom: 2px; */
		background: rgba(124, 170, 216, 1);
		/* background: url(../../static/pull.png) no-repeat; */
		position: absolute;
		top: 10upx;
		right: 10upx;
	    border-radius: 8upx;
/* 		padding: 0upx; */
		/* background-size: 100% 100%; */
		/* transition: height 2s; */
		font-size: 24upx;
		/* width: 20px;
		height: 20px; */
	}
</style>
